<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    showFooter
    :title="getTitle"
    width="50%"
    @ok="handleSubmit"
  >
    <div style="overflow: hidden; width: 100%; height: 500px">
      <VxeBasicTable ref="tableRef" v-bind="gridOptions" :data="dataList">
        <template #toolbar_buttons> </template>
      </VxeBasicTable>
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref, computed, unref, reactive } from 'vue';
  import { BasicForm, useForm } from '@/components/Form';
  import { formSchema, monthColumns } from './role.data';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { BasicTree, TreeItem } from '@/components/Tree';
  import { userMonthCountListApi } from '@/api/sys/user';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import {
    BasicTableProps,
    VxeBasicTable,
    VxeGridInstance,
    VxeGridListeners,
    VxeTableDefines,
  } from '@/components/VxeTable';
  import { useMessage } from '@/hooks/web/useMessage';

  const emit = defineEmits(['success', 'register']);
  const isUpdate = ref(true);
  const { createMessage } = useMessage();

  const userId = ref('');
  const dataList = ref([]);

  const getTitle = ref('累计时长统计');

  const gridOptions = reactive<BasicTableProps>({
    id: 'VxeTable',
    keepSource: true,
    editConfig: { trigger: 'click', mode: 'cell', showStatus: true },
    showOverflow: true,
    size: 'mini',
    height: 'auto',
    columns: monthColumns,
    // filterConfig: {
    //   remote: true,
    // },
    toolbarConfig: {
      slots: {
        buttons: 'toolbar_buttons',
      },
    },
    formConfig: {
      enabled: true,
      items: formSchema,
    },
    pagerConfig: {
      pageSize: 20,
    },
    proxyConfig: {
      enabled: false,
    },
  });
  const query = ref({});

  const [register, { setModalProps, closeModal }] = useModalInner(async (data) => {
    //打开弹层后的回调
    setModalProps({ confirmLoading: false });
    // 需要在setFieldsValue之前先填充treeData，否则Tree组件可能会报key not exist警告
    console.log('---data:', data);

    userId.value = '';
    query.value = data;
    userId.value = data.userId;
    getTitle.value = `${data.userName}${data.year}年累计时长统计`;
    userMonthCountListApi({
      page: 1,
      pageSize: 50,
      userId: userId.value,
      year: data.year,
    }).then((res) => {
      dataList.value = res.data.list;
    });
  });
</script>
